<!DOCTYPE html>
<!--
Copyright 2015 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html>
  <head>
    <title>Web App Install Banner: Defer prompt</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/samples/styles/main.css">
    <link rel="manifest" href="manifest.json">
  </head>
  <body>
    <h1>Web App Install Banner: Defer prompt of banner sample</h1>
    
    <p>Available in <a href="https://www.chromestatus.com/features/6560913322672128">Chrome 45+</a></p>

    <p>The <a href="https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/">web app install banner</a> will prompt the user to add your web app to the users home screen.
    It will only prompt when a number of criteria have been met:
    </p>

    <ul>
      <li>The site is using HTTPS</li>
      <li>The app has a manifest declared</li>
      <li>The manifest has a <code>short_name</code>, 144 pixel icon and a type of 'image/png'</li>
    </ul>
    
    <p>Frequently developers want be able to control when the install flow is shown to users.
       This API and example shows you how you can defer the flow until a later time, in this
       case when the user clicks the button below.</p>

    <button id="btnSave" disabled>Click this to install the app</button>
    
    <p>Below you will see the output of the example.</p>
    
    <pre id=output></pre>

    <script>
      window.addEventListener('load', function() {
  
        var outputElement = document.getElementById('output');
        var btnSave = document.getElementById('btnSave');
        var deferredPrompt;
  
        navigator.serviceWorker.register('service-worker.js', { scope: './' })
          .then(function(r) {
            console.log('registered service worker');
          })
          .catch(function(whut) {
            console.error('uh oh... ');
            console.error(whut);
          });
        
        window.addEventListener('beforeinstallprompt', function(e) {
          console.log('beforeinstallprompt Event fired');
          e.preventDefault();
          
          // Enable the button.
          btnSave.removeAttribute('disabled');
          
          // Stash the event so it can be triggered later.
          deferredPrompt = e;
          
          return false;
        });
        
        btnSave.addEventListener('click', function() {
          if (deferredPrompt !== undefined) {
            // The user has had a postive interaction with our app and Chrome
            // has tried to prompt previously, so let's show the prompt.
            deferredPrompt.prompt();
            
            outputElement.textContent = 'Deferred Prompt shown';
          
            // Follow what the user has selected.
            deferredPrompt.userChoice.then(function(choiceResult) {
              
              console.log(choiceResult.outcome);
              
              if (choiceResult.outcome == 'dismissed') {
                console.log('User cancelled homescreen install');
              }
              else {
                console.log('User added to homescreen');
              }
              
              // We no longer need the prompt.  Clear it up.
              deferredPrompt = null;
            });
          }
        });
      });
    </script>
  </body>
</head>
